import { Column, Group } from '@/components/pro-panel/index.typing';
import { useStageStore } from '@/store/stage';
import borderColor from './border-color';
import borderImage from './border-image';

const useGroup = () => {
  const stageStore = useStageStore();

  const tabs: Record<string, Column[]> = {
    颜色: borderColor,
    贴图: borderImage,
  };
  const columns = tabs[stageStore.layerData.data.borderTab] || [];

  const group: Group = {
    title: '边框效果',
    key: 'effect',
    collapsed: false,
    columns: [
      {
        type: 'tab',
        prop: 'borderTab',
        label: '',
        group: 'fillEffect',
        formProps: {
          options: Object.keys(tabs).map((label) => ({ label })),
          size: 'large',
        },
      },
      ...columns,
    ],
  };

  return group;
};

export default useGroup;
